<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>jQuery Wookmark Plug-in Example</title>
  <meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
  <meta name="author" content="Christoph Ono, Sebastian Helzle">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Global CSS for the page and tiles -->
  <link rel="stylesheet" href="css/wookmark.css">

</head>

<body>

  <div id="container">
    <header>
      <p>Using sliphover with <a href="http://www.wookmark.com/jquery-plugin">wookmark</a>. Scroll down to see that sliphover can work well with lazy loading content.</p>
    </header>
    <div id="main" role="main">

      <ul id="tiles">
        <!-- These are our grid blocks -->
        <li><img src="img/1.jpg" c height="283"><p>1</p></li>
        <li><img src="img/2.jpg" title="this is the caption" width="200" height="300"><p>2</p></li>
        <li><img src="img/3.jpg" title="this is the caption" width="200" height="252"><p>3</p></li>
        <li><img src="img/4.jpg" title="this is the caption" width="200" height="158"><p>4</p></li>
        <li><img src="img/5.jpg" title="this is the caption" width="200" height="300"><p>5</p></li>
        <li><img src="img/6.jpg" title="this is the caption" width="200" height="297"><p>6</p></li>
        <li><img src="img/7.jpg" title="this is the caption" width="200" height="200"><p>7</p></li>
        <li><img src="img/8.jpg" title="this is the caption" width="200" height="200"><p>8</p></li>
        <li><img src="img/9.jpg" title="this is the caption" width="200" height="398"><p>9</p></li>
        <li><img src="img/10.jpg" title="this is the caption" width="200" height="267"><p>10</p></li>
        <li><img src="img/1.jpg" title="this is the caption" width="200" height="283"><p>11</p></li>
        <li><img src="img/2.jpg" title="this is the caption" width="200" height="300"><p>12</p></li>
        <li><img src="img/3.jpg" title="this is the caption" width="200" height="252"><p>13</p></li>
        <li><img src="img/4.jpg" title="this is the caption" width="200" height="158"><p>14</p></li>
        <li><img src="img/5.jpg" title="this is the caption" width="200" height="300"><p>15</p></li>
        <li><img src="img/6.jpg" title="this is the caption" width="200" height="297"><p>16</p></li>
        <li><img src="img/7.jpg" title="this is the caption" width="200" height="200"><p>17</p></li>
        <li><img src="img/8.jpg" title="this is the caption" width="200" height="200"><p>18</p></li>
        <li><img src="img/9.jpg" title="this is the caption" width="200" height="398"><p>19</p></li>
        <li><img src="img/10.jpg" title="this is the caption" width="200" height="267"><p>20</p></li>
        <li><img src="img/1.jpg" title="this is the caption" width="200" height="283"><p>21</p></li>
        <li><img src="img/2.jpg" title="this is the caption" width="200" height="300"><p>22</p></li>
        <li><img src="img/3.jpg" title="this is the caption" width="200" height="252"><p>23</p></li>
        <li><img src="img/4.jpg" title="this is the caption" width="200" height="158"><p>24</p></li>
        <li><img src="img/5.jpg" title="this is the caption" width="200" height="300"><p>25</p></li>
        <li><img src="img/6.jpg" title="this is the caption" width="200" height="297"><p>26</p></li>
        <li><img src="img/7.jpg" title="this is the caption" width="200" height="200"><p>27</p></li>
        <li><img src="img/8.jpg" title="this is the caption" width="200" height="200"><p>28</p></li>
        <li><img src="img/9.jpg" title="this is the caption" width="200" height="398"><p>29</p></li>
        <li><img src="img/10.jpg" title="this is the caption" width="200" height="267"><p>30</p></li>
        <!-- End of grid blocks -->
      </ul>

    </div>
    <footer>

    </footer>
  </div>

  <!-- include jQuery -->
  <script src="js/jquery-1.11.1.min.js"></script>

  <!-- Include the imagesLoaded plug-in -->
  <script src="js/jquery.imagesloaded.js"></script>

  <!-- Include the plug-in -->
  <script src="js/jquery.wookmark.min.js"></script>
  <script src="js/jquery.sliphover.min.js"></script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function ($){
      var $tiles = $('#tiles'),
          $handler = $('li', $tiles),
          $main = $('#main'),
          $window = $(window),
          $document = $(document),
          options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $main, // Optional, used for some extra CSS styling
            offset: 20, // Optional, the distance between grid items
            itemWidth: 210 // Optional, the width of a grid item
          };

      /**
       * Reinitializes the wookmark handler after all images have loaded
       */
      function applyLayout() {
        $tiles.imagesLoaded(function() {
          // Destroy the old handler
          if ($handler.wookmarkInstance) {
            $handler.wookmarkInstance.clear();
          }

          // Create a new layout handler.
          $handler = $('li', $tiles);
          $handler.wookmark(options);
        });
      }

      /**
       * When scrolled all the way to the bottom, add more tiles
       */
      function onScroll() {
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);

        if (closeToBottom) {
          // Get the first then items from the grid, clone them, and add them to the bottom of the grid
          var $items = $('li', $tiles),
              $firstTen = $items.slice(0, 10);
          $tiles.append($firstTen.clone());

          applyLayout();
        }
      };

      // Call the layout function for the first time
      applyLayout();

      // Capture scroll event.
      $window.bind('scroll.wookmark', onScroll);

      //call sliphover
      $('#tiles').sliphover();
    })(jQuery);
  </script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46794744-6', 'auto');
  ga('send', 'pageview');

</script>
</body>
</html>
